<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto relative group">
			<view class="flex-col list space-y-20">
				<view class="flex-row items-center list-item" @click.stop="toDetail(item.service_id)"
					v-for="(item, index) in data.list" :key="index">
					<image class="shrink-0 image_13" :src="item.cover" />
					<view class="flex-col flex-auto group_7">
						<view class="flex-row justify-between">
							<text class="font_8 text_17">{{item.service_name}}</text>
							<text class="self-end font_10">{{item.term}}分钟</text>
						</view>
						<view class="flex-col justify-start items-center self-start text-wrapper_2">
							<text class="font_11">{{item.category}}</text>
						</view>
						<view class="flex-row justify-between items-end">
							<view class="flex-col">
								<view class="flex-row items-baseline group_9 space-x-14">
									<view class="group_10">
										<text class="font_5">￥</text>
										<text class="font_4">{{item.price}}</text>
									</view>
									<text class="font_12 text_18"
										v-if="item.price!=item.market_price">￥{{item.market_price}}</text>
								</view>
								<text class="self-start font_6 text_19">销量{{item.sales}}</text>
							</view>
							<view class="flex-row items-center">
								<image src="/static/edit.png" class="image_6" mode="" @click.stop="toEdit(item,index)">
								</image>
								<image src="/static/del.png" class="image_6" style="margin-left: 30rpx;"
									@click.stop="toDel(item,index)" mode=""></image>
							</view>
							<!-- <view class="flex-col justify-center items-center text-wrapper_3 button_2"
								@click.stop="toOrder(item.service_id)">
								<text class="font_13">修改</text>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col justify-start items-center button_2" @click="toChange"> <text class="font_1 text_7">上传新服务</text></view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onReachBottom,
		onShareAppMessage,
		onShareTimeline
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		nextTick,
		watch,
		onBeforeUnmount,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	let interval
	const music = uni.createInnerAudioContext();
	onLoad(() => {
		data.value.shop_id = uni.getStorageSync('shop_id')
		getList()
		uni.$on('edit', function(res) {
			console.log(res, "edit");
			getDetail(res.index)
		})
	})
	onShow(() => {

	})
	onBeforeUnmount(() => {
		uni.$off('edit')
	})
	onReachBottom(() => {
		console.log("上拉");
		data.value.p++
		getList()
	})
	let data = ref({
		shop_id: '',
		list: [],
		p: 1,
		pages: false,
	})

	const getDate = (index) => {
		proxy.$req.requestPOST( proxy.$api.CenterInfo.serviceDetail, {
			service_id: data.value.service_id,
		}).then(res => {
			if (res.flag == "success") {
				data.value.list[index]=res.data
			}
		})
	}
	const getList = () => {
		proxy.$req.requestPOST( proxy.$api.CenterInfo.serviceList, {
			shop_id: uni.getStorageSync('shop_id'),
			p: data.value.p
		}).then(res => {
			if (res.flag == "success") {
				data.value.list = [...data.value.list, ...res.data.list]
			} else {
				uni.showToast({
					title: res.message,
					icon: "none"
				})
			}
		})
	}
	const getEvalua = (num) => {
		if (num == 1) {
			data.value.type = 'new'
		} else if (num == 2) {
			data.value.type = 'favourable'
		} else if (num == 3) {
			data.value.type = 'bad'
		} else {
			data.value.type = ''
		}
		data.value.p = 1
		data.value.evaluateList.length = 0
		getList()
	}
	const toEdit = (v, index) => {
		uni.navigateTo({
			url: '/pages/edit/edit?service_id=' + v.service_id + '&index=' + index
		})
	}
	const toChange=()=>{
		uni.navigateTo({
			url: '/pages/edit1/edit'
		})
	}
	const toDel = (v, index) => {
		proxy.$req.requestPOST( proxy.$api.CenterInfo.shopServiceEdit, {
			shop_id: uni.getStorageSync('shop_id'),
			id: v.service_id,
			is_del: 0
		}).then(res => {
			uni.showToast({
				title: res.message,
				icon: "none"
			})
			if (res.flag == "success") {
				setTimeout(() => {
					data.value.list.splice(index, 1)
				}, 1000)
			}
		})
	}
	const toOption = (num) => {
		data.value.detail = num
		data.value.p = 1
		data.value.evaluateList.length = 0
		data.value.list.length = 0
		getList()
	}

	const onChange = (e) => {
		data.value.currentSwiper = e.detail.current
	}

	const toShare = () => {
		let url = window.location.href + '&invite_id=' + data.value.content.share_data.invite_id
		uni.setClipboardData({
			data: url,
			success: function() {
				console.log('success');
				uni.showToast({
					title: '链接已复制到剪切板',
					icon: 'none'
				})
			}
		});
	}
	
	const toCollect = () => {
		proxy.$req.requestPOST(proxy.$api.CenterInfo.setCollect, {
			shop_id: data.value.shop_id,
			member_id: uni.getStorageSync('member_id') || '',
		}).then(res => {
			uni.showToast({
				title: res.message,
				icon: "none"
			})
			if (res.flag == "success") {
				if (data.value.content.is_coll == 1) {
					data.value.content.is_coll = 0
				} else {
					data.value.content.is_coll = 1
				}
			}
		})
	}
	const toIMage = (num) => {
		if (num == 1) {
			uni.navigateTo({
				url: '/pages/busDetail/busDetail?shop_id=' + data.value.shop_id
			})
		} else if (num == 2) {
			uni.navigateTo({
				url: '/pages/imageUrl/imageUrl?shop_id=' + data.value.shop_id + "&type=1"
			})
		} else {
			uni.navigateTo({
				url: '/pages/report/report?shop_id=' + data.value.shop_id
			})
		}
	}
	const toOrder = (service_id) => {
		uni.navigateTo({
			url: '/pages/order/order?service_id=' + service_id
		})
	}
	const toDetail = (service_id) => {
		uni.navigateTo({
			url: '/pages/serviceDetail/serviceDetail?service_id=' + service_id
		})
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f8f8f8;
		width: 100%;
		// overflow-y: auto;
		// overflow-x: hidden;
		min-height: 100vh;

		button {
			border: 0 !important;
			outline: none !important;
			// margin: 0 !important;
			padding: 0 !important;
			background-color: #fff !important;
		}

		button::after {
			border: 0 !important;
			height: 100% !important;
		}

		.group {

			// padding-bottom: 88rpx;
			// overflow-y: auto;
			.swiper {
				width: 100%;
				position: relative;

				/* position: absolute;
				top: 20rpx;
				margin-left: 5%; */
				::v-deep swiper {
					height: 566rpx;
				}

				.swiper-item {
					width: 100%;
					height: 100%;

					>image {
						width: 100%;
						height: 100%;
					}
				}


				.swiper_dots {
					width: 100%;
					height: 36rpx;
					padding-right: 20rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					flex-direction: row;
					position: absolute;
					bottom: 29px;
				}

				.dot {
					width: 8rpx;
					height: 8rpx;
					border-radius: 7.5rpx;
					margin-right: 15rpx;
					background-color: #00BCE5;
				}
			}




			.group_2 {
				width: 98rpx;
				height: 100rpx;
				position: absolute;
				top: 0;
				right: 30rpx;
				z-index: 100;
			}

			.space-y-385 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 385rpx;
				}
			}

			.section_4 {
				margin-top: -30rpx;
				padding: 48rpx 30rpx 94rpx;
				background-color: #ffffff;
				border-radius: 40rpx 40rpx 0px 0px;

				.space-x-8 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 8rpx;
					}

					.font_2 {
						font-size: 36rpx;
						font-family: PingFangSC;
						line-height: 34rpx;
						color: #333333;
					}

					.image_9 {
						width: 24rpx;
						height: 28rpx;
					}
				}

				.space-x-15 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 15rpx;
					}

					.image_7 {
						width: 32rpx;
						height: 32rpx;
						display: block;
					}

					.image_8 {
						width: 34rpx;
						height: 32rpx;
					}
				}

				.group_4 {
					margin-top: 31rpx;

					.image_10 {
						width: 53rpx;
						height: 22rpx;
					}

					.image_11 {
						margin-left: 5rpx;
						width: 24rpx;
						height: 22rpx;
					}

					.image_12 {
						margin-left: 5rpx;
					}

					.text_8 {
						margin-left: 13rpx;
						color: #f52c2c;
						font-size: 26rpx;
						font-family: Bahnschrift;
						line-height: 32rpx;
					}

					.text_6 {
						margin-left: 36rpx;
					}

					.text_9 {
						margin-left: 6rpx;
					}

					.text_7 {
						margin-left: 35rpx;
					}

					.text_10 {
						margin-left: 6rpx;
					}
				}

				.text-wrapper {
					margin-top: 20rpx;
					padding: 8rpx 0;
					background-color: #eff5f0;
					border-radius: 6rpx;
					width: 80rpx;

					.text_11 {
						color: #54bc6e;
					}
				}

				.group_5 {
					margin-top: 29rpx;
					line-height: 25rpx;

					.font_7 {
						font-size: 26rpx;
						font-family: PingFang SC;
					}

					.text_12 {
						color: #999999;
						line-height: 25rpx;
					}

					.text_13 {
						color: #333333;
						line-height: 20rpx;
					}
				}
			}

			.font_3 {
				font-size: 24rpx;
				font-family: PingFang SC;
				line-height: 23rpx;
				color: #666666;
			}

			.section_5 {
				margin-top: -58rpx;
				padding: 0 30rpx;

				background-color: #ffffff;

				.group_6 {
					padding: 25rpx 0;
					margin-right: 60rpx;
					// height: 80rpx;

					.text_14 {
						font-size: 33rpx;
						line-height: 32rpx;
					}

					.font_9 {
						font-size: 32rpx;
						font-family: PingFang SC;
						line-height: 34rpx;
						color: #999999;
					}
				}

				.space-x-64 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						margin-left: 64rpx;
					}
				}

				.section_6 {

					background-color: #54bc6e;
					background-image: linear-gradient(-90deg, #54bc6e 0%, #00a796 100%),
						linear-gradient(-90deg, #cf000e 0%, #ffcd55 100%);
					border-radius: 4rpx;
					width: 66rpx;
					height: 8rpx;
					position: absolute;
					bottom: 0rpx;
				}
			}

			.list {
				padding: 30rpx 30rpx 34rpx;

				.list-item {
					padding: 32rpx 16rpx 32rpx 30rpx;
					background-color: #ffffff;
					border-radius: 20rpx;

					.image_13 {
						border-radius: 20rpx;
						width: 196rpx;
						height: 196rpx;
					}

					.group_7 {
						margin-left: 15rpx;

						.text_17 {
							margin-left: 6rpx;
						}

						.text-wrapper_2 {
							margin-left: 5rpx;
							margin-top: 18rpx;
							padding: 8rpx 0;
							background-color: #f0f0f0;
							border-radius: 6rpx;
							width: 80rpx;

							.font_11 {
								font-size: 22rpx;
								font-family: PingFangHeiTC;
								line-height: 21rpx;
								color: #333333;
							}
						}

						.group_9 {
							margin-top: 34rpx;

							.group_10 {
								line-height: 25rpx;
								height: 26rpx;
							}

							.font_12 {
								font-size: 22rpx;
								font-family: PingFangHeiTC;
								line-height: 17rpx;
								color: #9c9b9a;
							}

							.text_18 {
								text-decoration: line-through;
							}
						}

						.space-x-14 {

							&>view:not(:first-child),
							&>text:not(:first-child),
							&>image:not(:first-child) {
								margin-left: 14rpx;
							}
						}

						.text_19 {
							margin-left: 5rpx;
							margin-top: 19rpx;
						}
					}

					.font_10 {
						font-size: 24rpx;
						font-family: PingFangHeiTC;
						line-height: 23rpx;
						color: #999999;
					}

					.image_6 {
						border-radius: 10rpx;
						width: 40rpx;
						height: 40rpx;
					}

					.text-wrapper_3 {
						// align-self: flex-start;
						// margin-top: 100rpx;

						.font_13 {
							font-size: 26rpx;
							font-family: PingFangSC;
							line-height: 25rpx;
							color: #fff;
						}
					}

					.button_2 {
						// padding: 14rpx 0;
						background-color: #54bc6e;
						background-image: linear-gradient(270deg, #00a76e 0%, #54bc6e 100%),
							linear-gradient(0deg, #00a796 0%, #54bc6e 100%), linear-gradient(0deg, #00a796 0%, #0fd758 100%),
							linear-gradient(0deg, #01a793 0%, #0fd758 100%);
						border-radius: 16rpx;
						width: 128rpx;
						height: 54rpx;
					}
				}
			}

			.space-y-20 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 20rpx;
				}
			}

			.font_8 {
				font-size: 32rpx;
				font-family: PingFangSC;
				line-height: 31rpx;
				color: #333333;
			}

			.font_5 {
				font-size: 24rpx;
				font-family: PingFangSC;
				line-height: 19rpx;
				color: #ff3333;
			}

			.font_4 {
				font-size: 32rpx;
				font-family: PingFangSC;
				line-height: 25rpx;
				color: #ff3333;
			}

			.font_6 {
				font-size: 22rpx;
				font-family: PingFangHeiTC;
				line-height: 21rpx;
				color: #999999;
			}
		}

		.rate {
			.image_11 {
				margin-left: 5rpx;
				width: 26rpx;
				height: 24rpx;
			}

			// overflow-x: auto;
			.rateTop {
				height: 170rpx;
				background-color: #fff;

				.rateNum {
					margin-left: 36rpx;

					>text {
						&:nth-child(1) {
							font-size: 88rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #FF8900;
							text-align: center;
							line-height: 88rpx;
						}

						&:nth-child(2) {
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #FF8900;
							line-height: 26rpx;
							// margin-top: 10rpx;
						}
					}
				}

				.line {
					width: 1rpx;
					height: 68rpx;
					background: #CACACA;
					margin: 0 40rpx;
				}

				.level {
					width: 42rpx;
					height: 40rpx;
					margin: 0 10rpx;
				}

				.level1 {
					width: 21rpx;
					height: 38rpx;
				}
			}

			.score {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				margin-bottom: 14rpx;
			}

			.rates {
				.image_11 {
					margin-left: 5rpx;
					width: 26rpx;
					height: 24rpx;
				}

				background-color: #fff;

				.ratesTop {
					height: 104rpx;
					padding-left: 32rpx;

					.ratesItem {
						width: 100rpx;
						height: 50rpx;
						background: #EEF8F0;
						border-radius: 16rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-right: 24rpx;
					}

					.active {
						background: linear-gradient(135deg, #00A76E, #54BC6E);
						color: #FFFFFF;
					}
				}

				.evalu {
					font-size: 27rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-top: 30rpx;
					margin-bottom: 30rpx;
				}

				.ratelist {
					padding: 30rpx;
					border-bottom: 2rpx solid #F7F7F7;

					>image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 17rpx;
					}

					.ratelistMain {
						width: 86%;
						margin-top: 5rpx;

						.ratelistTop {
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;

							.level {
								width: 22rpx;
								height: 22rpx;
								margin-right: 8rpx;
								margin-top: 8rpx;
							}

							.level1 {
								width: 11rpx;
								height: 22rpx;
							}

							.time {
								font-size: 22rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #999999;
							}
						}

						.rateText {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #333333;
							margin-top: 20rpx;
							margin-bottom: 10rpx;
						}

						.rateImage {
							flex-wrap: wrap;
							margin-top: 10rpx;

							>image {
								width: 186rpx;
								height: 186rpx;
								border-radius: 20rpx;
								margin-right: 17rpx;
							}
						}

						.reply {
							width: 594rpx;
							// height: 132rpx;
							background: #F7F7F7;
							border-radius: 10rpx;
							padding: 20rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #666666;
							margin-top: 15rpx;
						}
					}
				}
			}
		}
		
		.information {
			border-bottom: 2rpx solid #F8F8F8;
			padding: 24rpx 30rpx;
			background-color: #fff;

			>image {
				&:nth-child(1) {
					width: 34rpx;
					height: 34rpx;
				}

				&:nth-child(3) {
					width: 10rpx;
					height: 18rpx;
				}
			}

			>text {
				width: 89%;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
		.button_2 {
			padding: 36rpx 0;
			background-color: #54BC6E;
			border-radius: 24rpx;
			position: fixed;
			bottom: 50rpx;
			right: 4%;
			width: 90%;
			.font_1 {
				font-size: 32rpx;
				font-family: PingFang SC;
				line-height: 31rpx;
				font-weight: 500;
			}
			.text_7 {
				color: #ffffff;
			}
		}
	}
</style>